<template>
  <q-page padding>
    <div class="tw-h-full tw-flex tw-flex-col">
      <div class="tw-flex-none tw-w-full">
        <div class="tw-grid tw-w-2/3 tw-m-auto tw-grid-cols-3 tw-gap-3 ">
          <div class="tw-w-full tw-h-full">
            <q-select v-model="province" :options="province_options" label="省份"></q-select>
          </div>
          <div class="tw-w-full tw-h-full">
            <q-input v-model="year.split('-')[0]" type="number" label="年份"></q-input>
          </div>
          <div class="tw-w-full tw-h-full tw-m-auto">
            <q-btn class="tw-mt-3" label="确认" color="primary" @click="search()" />
          </div>
        </div>
      </div>
      <div v-if="vis" class="tw-flex-2 tw-h-full">
        <div class="tw-w-2/3  tw-m-auto tw-h-full ">
          <q-markup-table separator="cell"  style="table-layout: fixed;overflow: none;" class="tw-mt-10" >
            <thead>
            <tr>
              <th class="text-left"></th>
              <th class="text-left">特征属性</th>
              <th class="text-left">数值</th>
              <th class="text-left">备注</th>
            </tr>
            </thead>
            <tbody  >
            <tr>
              <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">基础信息</td>
              <td class="text-left cell-left">干旱类型</td>
              <td class="text-left">{{data.type.value}}</td>
              <td class="text-left">
                {{ data.type.remark }}
              </td>
            </tr>
            <tr>
              <td class="text-left ">开始时间</td>
              <td class="text-left">{{ data.start_time }}</td>
              <td class="text-left"></td>

            </tr>
            <tr class="text-left">
              <td class="text-left">结束时间</td>
              <td class="text-left">{{ data.end_time }}</td>
              <td class="text-left"></td>
            </tr>
            <tr class="text-left">
              <td class="text-left">发生省份</td>
              <td class="text-left">{{ province }}</td>
              <td class="text-left"></td>
            </tr>
            <tr class="text-left">
              <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="4">气象信息</td>
              <td class="text-left cell-left">降水量</td>
              <td class="text-left">{{ data.water.value }}</td>
              <td class="text-left">{{ data.water.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">温度</td>
              <td class="text-left">{{ data.temp.value }}</td>
              <td class="text-left">{{ data.temp.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">风速</td>
              <td class="text-left">{{ data.wind.value }}</td>
              <td class="text-left">{{ data.wind.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">相对湿度</td>
              <td class="text-left">{{ data.moist.value }}</td>
              <td class="text-left">{{ data.moist.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">干旱指标信息</td>
              <td class="text-left cell-left">SPI</td>
              <td class="text-left">{{ data.SPI.value }}</td>
              <td class="text-left">{{ data.SPI.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">MCI</td>
              <td class="text-left">{{ data.MCI.value }}</td>
              <td class="text-left">{{ data.MCI.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">干旱烈度</td>
              <td class="text-left">{{ data.level.value }}</td>
              <td class="text-left">{{ data.level.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left q-td--no-hover cell-border cell-left cell-top" rowspan="3">社会经济信息</td>
              <td class="text-left cell-left">GDP</td>
              <td class="text-left">{{ data.GDP.value }}</td>
              <td class="text-left">{{ data.GDP.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">人口</td>
              <td class="text-left">{{ data.population.value }}</td>
              <td class="text-left">{{ data.population.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left">灾情</td>
              <td class="text-left">{{ data.disaster.value }}</td>
              <td class="text-left  tw-whitespace-normal tw-break-word"  >
                <p >
                  {{ data.disaster.remark }}
                  </p>
              </td>
            </tr>
            <tr class="text-left">
              <td class="text-left">应对措施</td>
              <td class="text-left">响应等级</td>
              <td class="text-left">{{ data.measure.value }}</td>
              <td> {{ data.measure.remark }}</td>
            </tr>
            <tr class="text-left">
              <td class="text-left"></td>
              <td class="text-left">投入资金</td>
              <td class="text-left">{{ data.fund.value }}</td>
              <td class="text-left">{{ data.fund.remark }}</td>
            </tr>
            </tbody>
          </q-markup-table>

        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from "vue";
import {api} from "../boot/api";
let confirm = ()=>{
 vis.value = true
}

let vis = ref(true)
let year = ref("2019-03-19");
let province = ref("山西");
let province_options = ref([
  "北京市",
  "天津市",
  "上海市",
  "重庆市",
  "河北省",
  "山西省",
  "辽宁省",
  "吉林省",
  "黑龙江省",
  "江苏省",
  "浙江省",
  "安徽省",
  "福建省",
  "江西省",
  "山东省",
  "河南省",
  "湖北省",
  "湖南省",
  "广东省",
  "海南省",
  "四川省",
  "贵州省",
  "云南省",
  "陕西省",
  "甘肃省",
  "青海省",
  "台湾省",
  "内蒙古自治区",
  "广西壮族自治区",
  "西藏自治区",
  "宁夏回族自治区",
  "新疆维吾尔自治区",
  "香港特别行政区",
  "澳门特别行政区"
]);


let data = ref({
  type:{
    value:'1234',
    remark:'type remark'
  },
  start_time:'2019-01-01',
  end_time:'2020-01-01',
  province:'山西',
  water:{
    value:'',
    remark:''
  },
  temp:{
    value:'12',
    remark:'some remark'
  },
  wind:{
    value:'12',
    remark:'wind remark'
  },
  moist:{
    value:'moist',
    remark:'moist remark'
  },
  SPI:{
    value:'spi ',
    remark:'spi remark'
  },
  MCI:{
    value:'mci ',
    remark:'mci remark'
  },
  level:{
    value:'1',
    remark:' level remark'
  },
  GDP:{
    value:'gdp',
    remark:' gdp remark'
  },
  population:{
    value:'population',
    remark:' population remark'
  },
  disaster:{
    value:'disaster',
    remark:' disaster dsaaaaa  sdasd asd as asd as das as as das sdasd a dsads dasd asd asd as  das remark'
  },
  measure:{
    value:'measure ',
    remark:'measure remark'
  },
  fund:{
    value:'fund ',
    remark:'fund remark'
  }
})

const search = ()=>{
  let formData = new FormData();
  formData.append("province", province.value);
  formData.append("year", year.value.split("-")[0]);
  api({
    url:'/query',
    method:'post',
    data:formData
  }).then(res=>{
    data.value = res.data.data
  })
}

search();


</script>
